<p>header works!</p>
<h2>我是header</h2>

<h3>引入图片</h3>
<!-- assets资源文件夹中的图片 -->
<!-- 不用写相对图片目录，默认从assets文件夹查找 -->
<img src="assets/image/icon-yellow_03.png" alt="">
<!-- 绑定动态图片地址 -->
<img [src]="imgSrc" alt="">


<!--  -->
<h3>条件渲染</h3>
<!-- gnIf -->
<p *ngIf="ifShow">为true的时候我显示</p>
<!-- gnIf--ngIf-else -->
<ng-container *ngIf="ifShow; else elseTemplate">
  <p>为true的时候我显示</p>
</ng-container>
<ng-template #elseTemplate>
  <p>为false的时候我显示</p>
</ng-template>

<!-- ngSwitch -->
<span [ngSwitch]="stateNum">
<p *ngSwitchCase=1>
1表示失败
</p>
<p *ngSwitchCase=2>
 2表示成功
</p>
<p *ngSwitchDefault>
  默认情况
</p>
</span>

<!-- ngClass -->
<!-- [ngClass]="{'class1': true}   
  key为属性名，value为布尔值，当value为true，则该属性显示 -->
<div [ngClass]="{'class1': true,'nn':false}"> 
我演示ngClass
</div>


<!-- ngStyle -->
<!-- [ngStyle]="{'属性名': '属性值','fontWeight':'bold'} -->
<!-- 属性名可用驼峰，也可不用 -->
<!-- 注意：属性值不加''表示使用变量，而非属性字符串 -->
<div [ngStyle]="{'color': 'red','fontWeight':'bold'}">
  我在演示ngStyle
</div>


<h3>管道</h3>
<!-- 类似filter -->
<p>大小写转换</p>
<p>{{str | uppercase}}</p>//转换成大写
<p>{{str | lowercase}}</p>//转换成小写

<p>日期格式转换</p>
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p> 

<!-- 自定义管道 -->
   <p>{{ '天津' | mydemo }}</p> 


<h3>事件</h3>
<!-- 使用(事件名)="方法名()" -->
<p (click)="run($event)">点我！
  {{str}}
</p>
<!-- 使用$event传入事件对象 -->
<input type="text" (keyup)="inputFn($event)">




<h3>双向数据绑定</h3>
<!-- 需在app.module.ts引入FormsModule -->
<input type="text" [(ngModel)]="bdstr">
<p>{{bdstr}}</p>